<template>
  <div id="PlayMusic" @click="toLyricView">
    <div>
      <img :src="musicInfo.imageUrl" width="49" alt="" />
      <van-loading type="spinner" color="gray" v-show="isloading" />
    </div>
    <span>{{ musicInfo.musicName }}-{{ musicInfo.artist}}</span>
    <div>
      <canvas
        @click.stop="musicController"
        ref="myCanvas"
        width="49"
        height="49"
      >
      </canvas>
      <van-icon name="bars" />
    </div>
  </div>
</template>

<script>
import request from "network/requests";
import {
  getSongDetail,
  getSongUrl,
  getSongLyric,
} from "network/api/PlayMusicBar";
let audio = new Audio();
export default {
  data() {
    return {
      musicInfo: {
        imageUrl:
          "https://p2.music.126.net/OeffdGbmBdr_UaiKaCA_cA==/109951164190512006.jpg",
        musicName: "网易云",
        artist: "00：00",
        lyric: "",
      },
      isloading: false,
      isCurrentMusic: false
    };
  },
  methods: {
    musicController() {
      console.log(audio.paused);
      if (audio.paused) {
        this.$store.commit("setmusicPlayState", true);
      } else {
        this.$store.commit("setmusicPlayState", false);
      }
    },
    playMusic() {
      this.clearCanvas();
      this.drawPlay();
      if (this.isCurrentMusic) {
        audio.play();
        return;
      }
      audio.addEventListener("canplaythrough", (e) => {
        audio.play();
        // 结束加载状态
        this.isloading = false;
        this.$store.commit("setLoading",false)
      });
      //播放完成监听
      audio.addEventListener("ended",e=>{
        console.log("播放完成");
              let index = this.$store.state.currentMusicIndex;
      if (this.$store.state.musicList.length === 0) {
        this.$toast.success("列表暂时没有歌曲");
        return;
      }
      if (index == this.$store.state.musicList.length - 1) {
        index = 0;
      } else {
        index++;
      }
      this.$store.commit("setcurrentMusicIndex", index);
      this.$store.commit(
        "setCurrentMusicId",
        this.$store.state.musicList[index].id
      );
      this.$store.commit("setLoading", true);
      })
      
      //模拟进度条
      let that = this;
      audio.ontimeupdate = function (e) {
        // 当前播放的对象事件
        that.$store.commit("setUpdateTimeEvent", e);
        // 设置单曲的进度

        that.drawprogress(e.path[0].currentTime, e.path[0].duration);
      };
      this.isCurrentMusic = true
    },
    pauseMusic() {
      //设置播放状态
      this.clearCanvas();
      this.drawPause();
      audio.pause();
    },
    drawPause() {
      let ctx;
      if (this.$refs.myCanvas.getContext) {
        ctx = this.$refs.myCanvas.getContext("2d");
        ctx.beginPath();
        ctx.lineWidth = 2;
        ctx.strokeStyle = "grey";
        ctx.arc(25, 25, 15, 0, 2 * Math.PI);
        ctx.closePath();
        ctx.stroke();
        ctx.beginPath();
        ctx.moveTo(28 - ((Math.sqrt(3) / 2) * 20) / 2, 15);
        ctx.lineTo(28 - ((Math.sqrt(3) / 2) * 20) / 2, 35);
        ctx.lineTo(28 + ((Math.sqrt(3) / 2) * 20) / 2, 25);
        ctx.closePath();
        ctx.stroke();
      }
    },
    drawPlay() {
      let ctx;
      if (this.$refs.myCanvas.getContext) {
        ctx = this.$refs.myCanvas.getContext("2d");
        ctx.beginPath();
        ctx.lineWidth = 2;
        ctx.strokeStyle = "grey";
        ctx.arc(25, 25, 15, 0, 2 * Math.PI);
        ctx.closePath();
        ctx.stroke();
        ctx.beginPath();
        ctx.lineWidth = 3;
        ctx.lineTo(20, 15);
        ctx.lineTo(20, 35);
        ctx.moveTo(30, 15);
        ctx.lineTo(30, 35);
        ctx.closePath();
        ctx.stroke();
      }
    },
    drawprogress(current, duration) {
      let ctx;
      if (this.$refs.myCanvas.getContext) {
        ctx = this.$refs.myCanvas.getContext("2d");
        ctx.strokeStyle = "grey";
        ctx.lineWidth = 3;
        ctx.beginPath();
        ctx.arc(
          25,
          25,
          14,
          -Math.PI / 2,
          (2 * Math.PI * current) / duration - Math.PI / 2
        );
        ctx.stroke();
        ctx.closePath();
      }
    },
    clearCanvas() {
      let ctx;
      if (this.$refs.myCanvas.getContext) {
        ctx = this.$refs.myCanvas.getContext("2d");
        ctx.clearRect(0, 0, 49, 49);
      }
    },
    toLyricView() {
      if (this.$store.state.currentMusicId === "0") {
        return;
      }
      this.$router.push("/lyricView");
    },
  },
  mounted() {
    // 播放按钮以及进度条
    // console.log(this.$refs);
    // this.drawPlay();
    this.clearCanvas();
    this.pauseMusic();
  },
  computed: {
    playState() {
      return this.$store.state.currentMusicId;
    },
    playMusicState() {
      return this.$store.state.musicPlayState;
    },
    currentTime() {
      return this.$store.state.currentTime;
    },
  },
  watch: {
    playState(newV, oldV) {
      // 设置加载状态
      this.isloading = true;
      this.isCurrentMusic= false;
      // 修改部分
      getSongDetail(newV).then((res) => {
        // 处理字符串
        this.musicInfo.artist = res.data.songs[0].ar[0].name;
        this.musicInfo.musicName = res.data.songs[0].name;
        this.musicInfo.imageUrl = res.data.songs[0].al.picUrl;
      });

      getSongUrl(newV).then((res) => {
        console.log(res);
        if (audio.paused) {
          audio.src = res.data.data[0].url;
        } else {
          audio.pause();
          audio.src = res.data.data[0].url;
        }
        this.playMusic();
        // 设置音乐为播放状态
        this.$store.commit("setmusicPlayState", true);
      });

      getSongLyric(newV).then((res) => {
        this.musicInfo.lyric = res.data;
      });
    },
    playMusicState(newV, oldV) {
      console.log(newV);
      if (newV) {
        this.playMusic();
      } else {
        this.pauseMusic();
      }
    },
    musicInfo: {
      handler(newV, oldV) {
        console.log("数据修改");
        this.$store.commit("setMusicInfo", newV);
      },
      deep: true,
      immediate: true,
    },
    currentTime(newV, oldV) {
      audio.currentTime = newV;
    },
  },
};
</script>

<style>
#PlayMusic {
  position: fixed;
  left: 50%;
  bottom: 50px;
  transform: translateX(-50%);
  height: 49px;
  width: 100%;
  background-color: #fff;
  /* border-radius: 25px; */
  display: flex;
  align-items: center;
}
#PlayMusic div:first-child {
  width: 49px;
  height: 49px;
  overflow: hidden;
  border-radius: 50%;
  margin-right: 20px;
}

#PlayMusic span {
  color: black;
  white-space: nowrap;
  width: 121px;
  overflow: hidden;
  text-overflow: ellipsis;
}

#PlayMusic div:last-child {
  display: flex;
  width: 30%;
  position: absolute;
  right: 0;
}
#PlayMusic div:last-child i {
  line-height: 49px;
  color: black;
  font-size: 35px;
}
#PlayMusic > div:nth-child(1) {
  position: relative;
}
#PlayMusic > div:nth-child(1) > div {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
</style>